<template>
	<el-row style="height: calc(100% - 32px);" v-loading="loading">
		<el-col :span="8" style="height: 100%;display: flex;justify-content: right;align-items: center">
			<img src="../../assets/logo2.png" width="140">
			<!-- <div style="font-size: 66px;font-weight: 300;">呱呱助手</div> -->
		</el-col>
		<el-col :span="16" style="height: 100%;display: flex;justify-content: center;align-items: center;">
			<div class="login-ctn">
				<el-segmented v-model="isDialog" :options="options" size="large"
					style="margin-bottom: 30px;margin-left: 0px;width: 270px;" />
				<el-form v-if="isDialog == '登录'" :model="data" label-width="auto" label-position="right"
					style="max-width: 300px">
					<el-form-item label="用户名：">
						<el-input v-model="data.loginInAccount_username" />
					</el-form-item>
					<el-form-item label="密码：">
						<el-input v-model="data.loginInAccount_userpwd" />
					</el-form-item>
					<el-button type="primary" style="width: 230px;margin-left: 70px;" @click="ruiKeFun">登录</el-button>
				</el-form>
				<el-form v-else-if="isDialog == '注册'" :model="data" label-width="auto" label-position="right"
					style="max-width: 300px">
					<el-form-item label="用户名：">
						<el-input v-model="data.signInAccount_username" />
					</el-form-item>
					<el-form-item label="密码：">
						<el-input v-model="data.signInAccount_userpwd" />
					</el-form-item>
					<el-button type="primary" style="width: 230px;margin-left: 70px;" @click="ruiKeFun">注册</el-button>
				</el-form>
				<el-form v-else-if="isDialog == '充值'" :model="data" label-width="auto" label-position="right"
					style="max-width: 300px">
					<el-form-item label="用户名：">
						<el-input v-model="data.accountRenew_cardnumorusername" />
					</el-form-item>
					<el-form-item label="卡密：">
						<el-input v-model="data.accountRenew_rechcardnum" />
					</el-form-item>
					<el-button type="primary" style="width: 230px;margin-left: 70px;"
						@click="ruiKeFun">充值/续费</el-button>
				</el-form>
				<el-form v-else-if="isDialog == '改密'" :model="data" label-width="auto" label-position="right"
					style="max-width: 300px">
					<el-form-item label="用户名：">
						<el-input v-model="data.editAccountPwd_username" />
					</el-form-item>
					<el-form-item label="旧密码：">
						<el-input v-model="data.editAccountPwd_userpwd" />
					</el-form-item>
					<el-form-item label="新密码：">
						<el-input v-model="data.editAccountPwd_newpwd" />
					</el-form-item>
					<el-button type="primary" style="width: 230px;margin-left: 70px;" @click="ruiKeFun">改密</el-button>
				</el-form>
				<el-form v-else-if="isDialog == '解绑'" :model="data" label-width="auto" label-position="right"
					style="max-width: 300px">
					<el-form-item label="用户名：">
						<el-input v-model="data.untieMacCode_cardnumorusername" />
					</el-form-item>
					<el-button type="primary" style="width: 230px;margin-left: 70px;" @click="ruiKeFun">解绑</el-button>
				</el-form>
			</div>
		</el-col>
	</el-row>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import router from '../../router/index'
const loading = ref(true)

const isDialog = ref('登录')
const options = ['登录', '注册', '充值', '改密', '解绑']
const data = reactive({
	loginInAccount_username: '',
	loginInAccount_userpwd: '',
	signInAccount_username: '',
	signInAccount_userpwd: '',
	accountRenew_cardnumorusername: '',
	accountRenew_rechcardnum: '',
	editAccountPwd_username: '',
	editAccountPwd_userpwd: '',
	editAccountPwd_newpwd: '',
	untieMacCode_cardnumorusername: '',
})

const ruiKeFun = () => {
	loading.value = true
	window.ipcRenderer.send('ruiKe', JSON.stringify({
		type: isDialog.value,
		params: data
	}))
	localStorage.setItem('loginIndex', JSON.stringify({ loginInAccount_username: data.loginInAccount_username, loginInAccount_userpwd: data.loginInAccount_userpwd }))
}

const winEventBtn = (type) => {
	window.ipcRenderer.send('winEvent', type)
}
onMounted(async () => {
	const storage = JSON.parse(localStorage.getItem('loginIndex'))
	if (storage) {
		data.loginInAccount_username = storage.loginInAccount_username
		data.loginInAccount_userpwd = storage.loginInAccount_userpwd
	}
	window.ipcRenderer.on('showMessageBox', async (event, value) => {
		console.log(value)
		loading.value = false
		ElMessageBox.alert(value.message, value.title, {
			callback: (action) => {
				if (value?.router) {
					router.push('/layout')
				}
				if (value?.type) {
				}
			}
		})
	})
	window.ipcRenderer.on('closeLoading', (event) => {
		console.log('关闭浇在')
		loading.value = false
	})
})

</script>

<style lang="scss" scoped>
.login-ctn {
	width: 500px;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.no-drag {
	-webkit-app-region: no-drag;
}

.drag {
	/* 设置该属性表明这是可拖拽区域，用来移动窗口 */
	-webkit-app-region: drag;
}

.btn_hover {
	transition: background-color 0.3s ease;
}

.btn_hover:hover {
	background-color: rgb(230, 230, 230);
}
</style>